/**
 * Stylesheet entry point for pages with body#form
 * See
 * - openlibrary/templates/covers/saved.html
 * - openlibrary/templates/covers/manage.html
 * Pages:
 * - /books/OL9737752M/The_Odyssey/add-cover
 * - /books/OL9737752M/The_Odyssey/manage-covers
 */
@import (less) "less/colors.less";
@import (less) "less/breakpoints.less";
@import (less) "less/mixins.less";

body#form {
  text-align: left;
  background-color: @white;
  overflow: hidden;

  /* stylelint-disable selector-max-specificity */
  div#revertNotice,
  div#revertLink,
  footer,
  #bottom {
    display: none;
  }
  /* stylelint-enable selector-max-specificity */
  .formButtons {
    position: absolute;
    height: 50px;
    bottom: 0;
    left: 0;
    text-align: center;
  }
  .column {
    min-height: 90px;
    margin: 10px;
    background-image: url(/images/back_sortable.png);
    background-repeat: no-repeat;
  }
  .trashCan {
    position: absolute;
    top: 20px;
    right: 32px;
    width: 32px;
    height: 42px;
    background-image: url(/images/back_sort-trash.png);
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  .trashPosition {
    position: relative;
    height: 90px;
    &:hover .trashCan {
      background-position: -32px 0;
    }
  }
  .trash {
    height: 90px;
    overflow: hidden;
    background-color: @light-yellow;
    margin: 0 10px;
    border-radius: 8px;
    border: 1px solid @dark-yellow;
  }
  .portlet {
    margin: 7px 13px 13px 7px;
    float: left;
    width: 70px;
    height: 70px;
    overflow: hidden;
    border: 1px solid @lighter-grey;
    border-radius: 6px;
    cursor: move;
    td {
      width: 70px;
      height: 70px;
      text-align: center;
      vertical-align: middle;
      cursor: move;
    }
    img {
      cursor: move;
    }
  }
  .portlet-content {
    padding: .4em;
  }
  .imagePost {
    float: left;
    width: 300px;
    text-align: center;
  }
  .imageSaved {
    float: left;
    width: 300px;
    font-size: .75em;
    color: @grey;
  }
  .saved {
    background: url(/images/icons/icon_saved.png) no-repeat;
    font-size: 1.5em;
    font-weight: 700;
    color: @black;
    padding: 6px 0 0 40px;
    min-height: 30px;
    margin: 25px 0 15px;
  }
}

// Import all common components
// TODO: Only formElement and a few common styles are actually needed
// to render this simple page. Once all.less is refactored, list them explicitly.
@import (less) "legacy.less";

@media all and ( min-width: @width-breakpoint-desktop ) {
  body#form {
    width: 600px;
    min-height: 440px;
    /* stylelint-disable selector-max-specificity */
    #placement,
    #position,
    #content {
      width: 600px;
      min-height: 440px;
    }
    /* stylelint-enable selector-max-specificity */
    .formButtons {
      width: 600px;
    }
    .column {
      width: 560px;
    }
    .trashPosition {
      width: 580px;
      float: left;
    }
    .trash {
      width: 560px;
      float: left;
    }
  }
}
